<template xmlns:v-on="http://www.w3.org/1999/xhtml">
    <div class="set" style="height: 100%;">
        <div class="addAttendance">
            <span id="add" @click="addcheck">
                数据导出
            </span>
            <div id="long">

            </div>
            <span id="record" @click="DataExportRecord">
                数据导出记录
            </span>
        </div>
        <div class="unData" v-show="unData">暂无数据</div>
        <div class="dataTable" v-show="hasData">
            <div class="main_rightMain">
                <div class="noticNav">
                    <span>导出文件名称</span>
                    <span>导出人员</span>
                    <span>导出时间</span>
                    <span>审批类型</span>
                </div>
                <ul>
                    <li v-for="(item,index) in tableData" :key="index">
                        <!-- <p>{{item.title}}</p> -->
                        <div>
                            <div class="noticNavs">
                                <span>{{item.fileName}}</span>
                                <span>{{item.name}}</span>
                                <span>{{item.createTime | Date}}</span>
                                <span style="cursor:default" :title=item.approvalType>{{item.approvalType}}</span>
                            </div>
                        </div>
                    </li>
                </ul>
                <div class="pagination">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" small layout="prev, pager, next" :total="totals">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { mapActions } from "vuex";
export default {
  name: "set",
  data() {
    return {
      unData: false,
      hasData: false,
      totals: 0,
      currentPage: 1,
      tableData: []
    };
  },
  created: function() {
    let self = this;
    var accessToken = sessionStorage.getItem("accessToken");
    if (accessToken) {
      //  获取列表
      self
        .getapprovaldatalog({
          currentPage: self.currentPage,
          pageSize: 10,
          companyId: sessionStorage.getItem("ORGID") //公司id
        })
        .then(data => {
          if (data.statusCode == "200") {
            if (data.data.rows.length == 0) {
              self.unData = true;
              self.hasData = false;
            } else {
              self.unData = false;
              self.hasData = true;
              self.tableData = data.data.rows;
              self.totals = data.data.totalCount * 1;
            }
          } else if (data.statusCode == "200003") {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
            this.$router.push({
              path: "/login"
            });
          } else {
            this.$message({
              type: "info",
              message: data.statusMessage
            });
          }
        })
        .catch(msg => {
          this.$message({
            type: "info",
            message: "服务器异常"
          });
        });
    }
  },
  filters: {
    typeFun(val) {
      if (val == 1) {
        return "是";
      } else {
        return "否";
      }
    },
    Date(val) {
      if (val) {
        var now = new Date(Number(val));
        var year = now.getYear() - 100;
        var month = now.getMonth() + 1;
        month = month > 9 ? month : "0" + month;
        var date = now.getDate();
        date = date > 9 ? date : "0" + date;
        var hour = now.getHours();
        hour = hour > 9 ? hour : "0" + hour;
        var minute = now.getMinutes();
        minute = minute > 9 ? minute : "0" + minute;
        return (
          "20" + year + "-" + month + "-" + date + " " + hour + ":" + minute
        );
      } else {
        return "暂无";
      }
    }
  },
  watch: {},
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      let self = this;
      self.currentPage = val;
      self
        .getapprovaldatalog({
          currentPage: val,
          pageSize: 10,
          companyId: sessionStorage.getItem("ORGID") //公司id
        })
        .then(data => {
          if (data.statusCode == "200") {
            if (data.data.records.length == 0) {
              self.unData = true;
              self.hasData = false;
            } else {
              self.unData = false;
              self.hasData = true;
              self.tableData = data.data.records;
              self.totals = data.data.totalCount * 1;
            }
          } else if (data.statusCode == "200003") {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
            this.$router.push({
              path: "/login"
            });
          } else {
            this.$message({
              type: "info",
              message: data.statusMessage
            });
          }
        })
        .catch(msg => {
          this.$message({
            type: "info",
            message: "服务器异常"
          });
        });
    },
    addcheck: function() {
      this.$router.push({
        path: "/home/examine/dataExport"
      });
    },
    DataExportRecord() {
      this.$router.push({
        path: "/home/examine/dataExportRecord"
      });
    },
    ...mapActions(["getapprovaldatalog"])
  }
};
</script>
<style scoped>
.el-table {
  border: none !important;
}

.addAttendance {
  height: auto;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  margin-left: 16px;
  margin-right: 16px;
  padding-top: 20px;
  padding-bottom: 12px;
  color: #303030;
  font-size: 14px;
}

#add {
  color: #000;
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
}

#record {
  color: #e7744a;
  cursor: pointer;
}

#long {
  display: inline-block;
  width: 1px;
  height: 14px;
  padding-top: 10px;
  margin-left: -10px;
  background-color: #aeaeae;
}

.recordTable {
  width: 90%;
  margin-left: 20px;
  margin-top: 20px;
}

.pagination {
  float: right;
  margin-right: 20px;
}

.dataTable {
  text-align: center;
  width: 95%;
  height: auto;
  margin-left: 10px;
}

.addTitle {
  float: right;
  margin-top: -40px;
  margin-right: 30px;
  cursor: pointer;
  width: 70px;
  height: 30px;
  background-color: #e7744a;
  color: #ffffff;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  border-radius: 4px;
}

.pagination {
  float: right;
  margin-right: 20px;
}

.main_rightTop p:nth-child(1) {
  color: #303030;
  font-size: 14px;
  padding-top: 24px;
  padding-bottom: 12px;
  margin-left: 44px;
  /* width: calc(100% - 88px); */
  border-bottom: 1px solid #d9d9d9;
}

.main_rightTop {
  width: 100%;
}

.main_rightMain {
  margin-left: 44px;
  width: calc(100% - 88px);
}

.noticNav {
  width: 100%;
  height: 48px;
  line-height: 48px;
  background: #f4f4f6;
  margin-top: 20px;
}

.noticNavs {
  width: 100%;
  height: 48px;
  line-height: 48px;
  /* background: #f4f4f6; */
  /* margin-top: 20px; */
}

.noticNavs span:nth-child(4) p {
  width: 20%;
  height: 40px;
  float: left;
}

.noticNavs span:nth-child(1) {
  width: 22%;
  text-align: left;
  padding-left: 24px;
}

.noticNavs span {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  float: left;
  width: 25%;
  text-align: center;
}

.noticNav span:nth-child(1) {
  width: 22%;
  text-align: left;
  padding-left: 24px;
}

.noticNav span {
  float: left;
  width: 25%;
  text-align: center;
}

/* .noticNav span:nth-child(1) {
        float: left;
        margin-left: 24px;
    }
    
    .noticNav span:nth-child(2) {
        float: right;
        margin-right: 134px;
    } */

ul li {
  height: 48px;
  border-bottom: 1px solid #d9d9d9;
}

ul li > p {
  height: 48px;
  line-height: 48px;
  margin-left: 24px;
  cursor: pointer;
}

.biaoti {
  float: left;
}

.unread {
  float: left;
  margin-left: 189px;
}

.grayfont {
  color: #8f8e94;
}

.borderStyle {
  cursor: pointer;
  font-size: 12px;
  color: #fcb298;
  width: 48px;
  display: inline-block;
  border: 1px solid #fcb298;
  height: 20px;
  line-height: 20px;
  border-radius: 17px;
  text-align: center;
}

.unData {
  width: 100%;
  color: #303030;
  font-size: 20px;
  text-align: center;
  margin-top: 100px;
}
</style>